import React from 'react'
import { connect } from 'dva'
import QueryString from 'querystring'

import Title from '../components/Title'

class AddressEdit extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            isEdit: false,
            addressObj: {
                name: '',
                phone: '',
                province: '',
                detail: '',
                postcode: '',
            }
        }
    }

    componentDidMount() {
        const { location, user } = this.props
        if (location.search.indexOf('?id=') !== -1) {
            this.setState({ isEdit: true })
            
            // location.search
            // 修改地址
            let url = location.search
            url = url.replace('?', '')
            let params = QueryString.parse(url)

            // 1. 拿到id
            // 2. 根据 id 去 user.addressList.map[id] 中找到 对应的地址
            // 3. setState 到当前组件的状态中
            // 4. 更新字段
            // 5. 提交
            try {
                if (user.addressList.map[params.id]) {
                    this.setState({
                        addressObj: user.addressList.map[params.id]
                    })
                }
            } catch (error) {
                console.error(error)
            }

        } else {
            this.setState({ isEdit: false })
        }
    }

    create = () => {
        this.changeAddressObj('user/createAddress')
    }
    edit = () => {
        this.changeAddressObj('user/updateAddress')
    }
    del = () => {
        this.changeAddressObj('user/deleteAddress')
    }

    changeAddressObj = (type = 'user/createAddress') => {
        const { addressObj } = this.state
        const { dispatch, history } = this.props
        let payload = addressObj
        if (type === 'user/deleteAddress') {
            payload = payload._id
        }
        dispatch({
            type: type,
            payload,
            history
        })
    }

    renderBtns = () => {
        const { isEdit } = this.state
        return (
            <>
                <button 
                    className='btn addAddressBtn'
                    onClick={isEdit ? this.edit : this.create}
                >
                    { isEdit ? '修改' : '新增' }
                </button>
                {
                    isEdit && (
                        <button 
                            className='btn addAddressBtn-del'
                            onClick={this.del}
                        >
                            删除地址
                        </button>
                    )
                }
            </>
        )
    }

    changeAddress = (e, key) => {
        const { addressObj } = this.state
        addressObj[key] = e.target.value
        this.setState({ addressObj: { ...addressObj } })
    }

    renderForm = () => {
        
        // : '',
        // : '',

        let fields = [
            {
                text: '收货人',
                placeholder: '姓名',
                key: 'name'
            },
            {
                text: '手机号码',
                placeholder: '11手机号码',
                key: 'phone'
            },
            {
                text: '省/市',
                placeholder: '省/市',
                key: 'province'
            },
            {
                text: '详细地址',
                placeholder: '街道门牌',
                key: 'detail'
            },
            {
                text: '邮编',
                placeholder: '请输入邮编',
                key: 'postcode'
            },
        ]
        return (
            <div className='form'>
                {
                    fields.map(item => {
                        const  { text, key, placeholder } = item
                        const { addressObj } = this.state
                        
                        return (
                            <div className='field' key={key} >
                                <div className='field-key' >{text}</div>
                                <input 
                                    className='field-value' 
                                    value={addressObj[key]} 
                                    placeholder={placeholder} 
                                    onChange={e => this.changeAddress(e, key)}
                                />
                            </div>
                        )
                    })
                }
                {this.renderBtns()}
            </div>
        )
    }

    render() {
        return (
            <div>
                <Title title='编辑地址' />
                {this.renderForm()}
            </div>
        )
    }
}

const mapState = state => ({
    user: state.user
})

export default connect(mapState)(AddressEdit)